<template>
	<view>
		<view class="content" style="margin-top: 100upx;">
			<view style="width: 200upx;height: 200upx;border-radius: 100upx;border: 1px #007AFF solid;overflow: hidden;">
				<image :src="defaulTheadPortrait" mode="" style="width: 200upx;height: 200upx;" @click="uploadUserImage"></image>
			</view>
		</view>
		<view class="content">
			<text style="font-size: 10upx;color: #F0AD4E;">点击上传头像</text>
		</view>
		<view class="content" style="margin-top: 100upx;">
			<view style="border-bottom: 2upx #dedede solid;width: 70%;">
				<input v-model="mobilePhone" type="number" focus maxlength="11" 
				placeholder="注册手机号" @blur="checkPhoneOnlyOne"/>
			</view>
		</view>
		<view style="position: relative;left: 60%;bottom: 50upx;">
			<text style="color: #4CD964;font-size: 10upx;" v-if="canRegisterInfo==true">可以注册</text>
			<text style="color: #DD524D;font-size: 10upx;" v-if="unRegisterInfo==true">手机号已存在</text>
		</view>
		<view class="content" style="margin-top: 100upx;">
			<view style="border-bottom: 2upx #dedede solid;width: 70%;">
				<input v-model="userPassword" type="text" focus  placeholder="注册密码" />
			</view>
		</view>
		<view style="margin-top:50upx;" class="content">
			<view style="width: 40%;">
				<button type="primary" @click="registerBtn">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobilePhone:"",
				phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
				canRegisterInfo:"",
				unRegisterInfo:"",
				userPassword:"",
				defaulTheadPortrait:"../../static/icon/默认头像.jpeg"
			}
		},
		methods: {
			checkPhoneOnlyOne(){
				//这是异步效验手机号是否存在
				if(this.phoneReg.test(this.mobilePhone)){
					uni.request({
						url:"/api/tato/checkPhoneOnlyOne",
						data:{
							"mobilePhone":this.mobilePhone
						},
						success: (res) => {
							if(res.data){
								this.canRegisterInfo=true
								this.unRegisterInfo=false
							}else{
								this.canRegisterInfo=false
								this.unRegisterInfo=true
							}
						}
					})
				}else{
					uni.showToast({
					    title: '这不是手机号',
					    duration: 2000,
						icon:"none"
					});
					this.canRegisterInfo=false
					this.unRegisterInfo=false
				}
			},
			uploadUserImage(){
				uni.chooseImage({
					"count":1,
					"sourceType": ['album'],
					success: (res) => {
						this.defaulTheadPortrait=res.tempFilePaths[0]
					}
				})
			},
			registerBtn(){
				if(this.phoneReg.test(this.mobilePhone)&&this.userPassword.trim()>0&&this.canRegisterInfo==true){
					//将信息上传至后台
					uni.uploadFile({
						url:"/api/tato/generalUserRegister",
						filePath:this.defaulTheadPortrait,
						name: 'file',
						formData:{
							"mobilePhone":this.mobilePhone,
							"userPassword":this.userPassword
						},
						success: (res) => {
							if(res.data){
								uni.showToast({
								    title: '注册成功',
								    duration: 2000,
									icon:"none"
								});
								setTimeout(function() {
									uni.redirectTo({
										url: '../login_page/login_page'
									});
								}, 2000);
							}else{
								uni.showToast({
								    title: '服务器正忙,请稍后再试',
								    duration: 2000,
									icon:"none"
								});
							}
						}
					});
				}
			}
		}
	}
</script>

<style>
 .content{
	 display: flex;
	 justify-content: center;
 }
</style>
